<template>
  <div class="myvideo-container">
    <div class="myvideo-header">
      <span
        >我的视频<span>（{{ myVideo.length }}）</span></span
      >
    </div>
    <div class="myvideo-split"></div>
    <div class="video-list">
      <div class="myvideo-item" v-for="video in myVideo" :key="video.vid">
        <div class="video-img">
          <router-link :to="{ path: '/mv', query: { id: video.vid } }">
            <img v-lazy="video.coverUrl" alt="" />
          </router-link>
        </div>
        <div class="video-info">
          <p class="video-title">{{ video.title }}</p>
          <p class="artist">{{ video.creator[0].userName }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "myVideo",
};
</script>

<script lang="ts" setup>
import { getMyVideoApi } from "@/api/myMusic/mySinger";
import { ref, onMounted } from "vue";

const myVideo = ref<any>([]);

const getMyVideo = async () => {
  const res = await getMyVideoApi();
  myVideo.value = res.data;
};

onMounted(() => {
  getMyVideo();
});
</script>

<style scoped>
.myvideo-container {
  width: 750px;
  border: 1px solid #d3d3d3;
}
.myvideo-header {
  font-size: 24px;
  padding: 10px;
}
.myvideo-split {
  width: 100%;
  height: 1px;
  background: #000;
  margin: 5px 0;
}
.myvideo-item {
  padding: 5px;
}
.myvideo-item img {
  width: 159px;
  height: 90px;
  margin-right: 10px;
}

.video-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.video-info {
  font-size: 14px;
}
.video-info .video-title {
  width: 150px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>
